<template>  
  <!-- 吸顶头部 -->  
  <view class="bg-white fixed-top align-center flex justify-between header font-sm">  
    <view class="center flex justify-between align-center">
    	<view class="flex">
    	  <text class="text-orange mr-4" @click="goindex()">回到首页</text>  
    	  <text>你好，欢迎</text>  
    	  <view>  
    	    <navigator :url="username=='[请登录]'?'/pages/Login/Login':''">{{username}}</navigator>  
    	  </view>  
    	  <view class="ml-2">  
    	    <navigator v-if="username=='[请登录]'" url="/pages/Login/register"> [免费注册] </navigator>
			<text class="hover" v-else @click="goout()">退出登陆</text>
    	  </view>  
    	</view>  
    	<view class="header-right flex">  
    	  <view class="text">  
    	    <navigator v-if="username!='[请登录]'" url="/pages/MyServices/MyServices"> 我的服务 </navigator>  
    	  </view>  
    	  <view class="text">  
    	    <navigator v-if="username!='[请登录]'" url="/pages/MyMessage/MyMessage?id=1.1"> 我的消息 </navigator>  
    	  </view>  
    	  <view class="text">  
    	    <navigator url=""> 客服专区 </navigator>  
    	  </view>  
    	</view> 
    </view> 
  </view>  
</template>  
  
<script>  
export default {  
  name: "top-nav2",  
  data() {  
    return {  
      paddingSize: 225 // 默认内边距大小  
    };  
  },
  props:{
	  username:{
		  type:String,
		  default:'[请登录]'
	  },
  },
  methods: {  
	goindex(){
		uni.navigateTo({
			url:'/pages/index/index'
		})
	},
	goout(){
		uni.removeStorageSync('token')
		uni.removeStorageSync('enterprise')
		uni.removeStorageSync('username')
		uni.removeStorageSync('use')
		uni.navigateTo({
			url:'/pages/Login/Login'
		})
		window.location.reload()
	}
  }  
}  
</script>
<style lang="scss">
	navigator:hover {
		color: #fc7c08;
	}
	.hover:hover{
		color: #fc7c08;
		cursor: pointer;
	}
	.center {
		width: 1200px;
		margin: auto;
		@media (max-width: 480px) {
			width: 480px;
			margin: auto;
			font-size: 10px;
		}
	}
	.header-right {
		margin-left: 30rpx;
		@media (max-width: 480px) {
			margin-left: 10rpx;
			font-size: 10px;
		}
	}

	.header .text {
		margin-right: 20rpx;
		@media (max-width: 480px) {
			margin-right: 10rpx;
			font-size: 10px;
		}
	}
</style>